Article = require '../models/article'
_ = require 'underscore'

jQueryArticle = 
  title : 'jQuery简解'
  content : [
    {
      tag : 'title'
      data : 'jQuery对象'
    }
    {
      tag : 'p'
      data : '很多刚开始接触jQuery的人都没有搞清楚jQuery对象和DOM对象的区别，jQuery对象和DOM对象是完全的不一样，可以简单的认为jQuery对象里面有属性指向DOM对象（当然这些DOM对象都是通过选择器选择的）。如下面HTML所示，该页面上有四个class为"test"的元素:'
    }
    {
      tag : 'code'
      data : '<div class="test">aa</div>\n
<a href="#" class="test">bb</a>\n
<p class="test">cc</p>\n
<span class="test">dd</span>'
    }
    {
      tag : 'p'
      data : '通过$(\'.test\')选择了这四个元素，jQuery对象中的[0], [1]...对应的就是DOM对象，因此简单的说，jQuery对象除了带有jQuery的方法，它还有一些属性指向DOM对象。当然不要认为jQuery对象是数组对象，可能有部分人以为可以[0], [1]这样返回对应的DOM对象，就以为这是数组下标的用法，认为jQuery是数组，这是错误的理解。[0]，[1]这是对象属性的引用，如果对对象属性引用不了解的，看看下面的代码就知道了。'
    }
    {
      tag : 'code'
      data : 'var tmp = {\n
  a : \'aa\'\n
};\n
tmp[\'b\'] = \'bb\'; \\== tmp.b = \'bb\'; \n
tmp[\'0\'] = \'00\'; \\javascript中不允许直接定义tmp.0，因此只能用左边的写法 \n
tmp[1] = \'11\'; \\虽然看上去像彞有，但也是定义对象的属性值'
    }
    {
      tag : 'p'
      data : '而调用jQuery的方法，实际上就是jQuery历遍它属性所指向的所有DOM结点（有部分jQuery方法只会对第一个DOM结点调用，如获取属性值的方法.css(\'color\')等）。<br />
下面介绍jQuery对象的其它属性：<br />
1、属性length：用于表示该jQuery对象指向的DOM结点个数。<br />
2、属性context：用于保存查找的作用域，默认为document，jQuery的构造函数是有两个参数的（很多初学者都不知道有第二个参数，平时使用时，应该尽量把第二个参数也传递，减少查找作用域），一个是selector（选择器），还有一个就是context，如果第二个参数不传，默认就是为document。有时为了缩小查找的作用域，可以传递第二个参数（这是很多初学者并不了解的）。<br />
3、属性prevObejct：用于保存jQuery链式查找的上一个jQuery对象，如：'
    }
    {
      tag : 'code',
      data :'var testObj = $(\'#test\');\n
var pObj = testObj.find(\'p\');\n
pObj.prevObejct //这个对象指向的就是testObj'
    }
    {
      tag : 'p'
      data : '当然，由于jQuery的API并没有公开这个属性，就是没办法保证这个属性以后是不是存在，所以尽量不要用，而应该用API中的.end()这个方法。<br />
4、属性selector：创建jQuery对象的选择器。<br />'
    }
    {
      tag : 'title'
      data : 'jQuery事件绑定'
    }
    {
      tag : 'p'
      data : '很多新人在写jQuery的绑定事件时，没有弄清楚一个原理，那就是元素要先存在（就是在HTML的文档树中），才可以绑定事件。（当然，可能有些人会说使用.live来绑定事件就可以元素未添加就绑定事件，这个后面会介绍一下），先来看示例：'
    }
    {
      tag : 'code'
      data : '//HTML如下\n
<div class="test">aa</div>\n
//javascript代码如下\n
$(\'.test\').click(function(){\n
  $(\'<div class=\"test\">aa</div>\').appendTo(\'body\');\n
});'
    }
    {
      tag : 'p'
      data : '如上代码所示，当点击.test节点时，它会append一个.test节点到body，再点击，它再append，如果你这里再去点击新append进来的.test，发现它并没有触发绑定的方法，所以要注意事件绑定的时机。还有一个，如果要判断一个jQuery有没选择到节点，不是直接if($(\'XXX\'))这样判断的，要用if(!$(\'XXX\').length)，因为jQuery当初设计的时候，就是为了避免每次使用的时候都去判断是否有选择到节点，所以就算你没有选择到节点，jQuery的所有方法一样可以正常调用，不报任何的错误。下面来说.live方法的实现原理，还是上面的例子，不过增加以下的javascript代码：'
    }
    {
      tag : 'code'
      data : '$(\'.test\').live(\'click\', function(){\n
  alert(\'live\');\n
});'
    }
    {
      tag : 'p'
      data : '这个时候，可以发现，无论点击原有的.test节点，还是点击新append进去的.test节点，都会alert(\'live\')。接着，我们再把原来绑定的方法改一下，改为如下：'
    }
    {
      tag : 'code'
      data : '$(\'.test\').click(function(event){\n
  $(\'<div class=\"test\">aa</div>\').appendTo(\'body\');\n
  return false;\n
});'
    }
    {
      tag : 'p'
      data : '这个时候再点击.test，发现它只append了一个新的.test节点，并没有触发alert(\'live\')，点击新append的.test节点时，发现它有触发alert(\'live\')。其实.live方法的实现，它是利用了事件的冒泡原理，每个元素的事件，如果我们没有阻止，它会往上冒泡（父元素能获取到子元素的事件），最终会去到document对象中。所以，我们后面修改的代码，加了return false之后，它的点击事件就不会往上冒泡，因些就没有触发.live方法。'
    }
    {
      tag : 'p'
      data : '大家可以多点去看一下事件绑定的回调函数的参数event对象，里面有很多有用的属性，特别是event.target，它是指向最开始触发事件的节点。顺带提一下，.live方法在最新的API中是Deprecated状态的，.delegate方法倒是没有（它的实现原理和.live差不多，只不过它并不把事件都放在document才处理而已），而在jQuery1.7版本增加.on方法则更加强大，可以替代.bind, .delegate，建议大家尽量使用它。'
    }
  ]

expressArticle = 
  title : 'express静态文件处理'
  content : [
    {
      tag : 'p'
      data : '最近公司准备开始试水node.js，因此我这个前端也开始弄起了后台，当时选用的是express，因为也没怎么用过，因此上官网看了一下示例，代码如下：'
    }
    {
      tag : 'code'
      data : 'app.use(express.logger(...));\n
app.use(express.bodyParser(...));\n
app.use(express.cookieParser(...));\n
app.use(express.session(...));\n
app.use(app.router);\n
app.use(express.static(...));\n
app.use(express.errorHandler(...));'
    }
    {
      tag : 'p'
      data : '在这里先说一下express的use，use的参数是一个function，该function在每个HTTP请求进来的时候，顺序执行下去（当然有可能会跳过），先来看看下面的代码：'
    }
    {
      tag : 'code'
      data : 'app.use(function(req, res, next){\n
  if(req.url === \'ajaxcall\'){\n
    res.end(\'fail\');\n
  }else{\n
    next();\n  
  }\n   
})'
    }
    {
      tag : 'p'
      data : '上面的函数会对URL是ajaxcall的函数作处理，返回fail这个字符串，该HTTP请求的处理结束了。而其它的HTTP请求不作处理，直接调用next函数，该方法会将当前的请求交由下一个函数来处理。当然，在res.end(\'fail\')那里，也可以只对HTTP头部作处理（如：res.header(\'attr\', \'value\'），再调用next()函数。'
    }
    {
      tag : 'p'
      data : '再看回上面的代码，一个HTTP请求，最长的路径是：logger、bodyParser、cookieParser、session、router、static、errorHandler，现在主要说的是static，该方法主要是处理一些静态的文件请求，如：js,css,png等，在这里我们发现，其它这些请求对于bodyParser、cookieParser、session、router都是无意义的。因此我作了个测试，把static提到在logger之前，请求同一个js文件：在200并发的情况下，结果是（Requests per second:    2150.67 [#/sec] (mean)），而按上面的代码那样，只能达到(Requests per second:    1250.67 [#/sec] (mean))。由于打开一个页面，基本大部分的HTTP请求都是静态文件的请求，因此这种优化是有必要的。在这两种情况下对router部分的请求的测试 性能是基本一样的。（注：如果中间的处理部分，session等处理得很快，那么两种方法是比较难看到差距的）'
    }
    {
      tag : 'p'
      data : '顺带说一句，静态文件的URL请求应该添加一个特定的前缀，用于区别其它的HTTP请求，以便快速判断是不是静态文件请求。以前在网上看过说node不可以使用超过2G的内存，但是刚刚我测试没发现这个问题，使用的内存可以去到6G，因为我的电脑只有8G内存，因些没有继续测试。操作系统:ubuntu 12.04(64bit), node.js:0.6.19。'
    }
  ]


contentList = [jQueryArticle, expressArticle]
_.each contentList, (content) ->
  Article.save content, (err) ->
    console.log err
